<template>
  <div class="homesearchbar">
    <div class="inner">
      <div class="date">
        <div class="top">
          <span class="text">住 </span>
          <span class="start">{{ enter }}</span>
        </div>
        <div class="bottom">
          <span class="text">离 </span>
          <span class="end">{{ leave }}</span>
        </div>
      </div>
      <div class="searchbox">
        <div class="searchvalue">关键字 / 位置 / 民宿</div>
        <i class="search-icon"></i>
      </div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia"
import { computed } from "vue"

import { useMainStore } from "@/stores/modules/main"
import { formatMonthDay } from "@/utils/format_date"

const mainStore = useMainStore()
const { startData, endDate } = storeToRefs(mainStore)
const enter = computed(() => formatMonthDay(startData.value, "MM.DD"))
const leave = computed(() => formatMonthDay(endDate.value, "MM.DD"))
</script>

<style lang="less" scoped>
.homesearchbar {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px 10px;
  background-color: #fff;
  // height: 50px;
  .inner {
    border: 1px solid #fbf5f5;
    background-color: #fbf5f5;
    border-radius: 4px;
    display: flex;
    .date {
      width: 20%;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      padding: 3px;
      border-right: 2px solid #fff;
      line-height: 1.2;
      .top,
      .bottom {
        display: flex;
        justify-content: center;
        .text {
          margin-right: 2px;
          color: #aaa;
          font-size: 11px;
        }
        .start,
        .end {
          font-size: 11px;
        }
      }
    }
    .searchbox {
      width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .searchvalue {
        // margin-top: 10px;
        margin-left: 5px;
        color: #aaa;
        font-size: 14px;
        text-shadow: 0.3px 0.2px #aaa;
      }
      .search-icon {
        width: 24px;
        height: 24px;
        // position: relative;
        // top: 3px;

        background-image: url(../../assets/img/home/home-sprite.png);
        background-position: -29px -151px;
        background-size: 207px 192px;
      }
    }
  }
}
</style>
